<template>
  <div class="child">
    <h3>子组件</h3>
    <h4>玩具: {{ toy }}</h4>
  </div>
</template>

<script setup lang="ts" name="Child">

import {defineEmits, onMounted, ref} from "vue";

let toy = ref('阿童木')
// 声明事件
const emit = defineEmits(['test-event'])

onMounted(()=> {
  setTimeout(()=>{
    // 触发事件
    emit('test-event', toy.value)
  }, 3000)
})

</script>

<style scoped>
	.child{
		background-color: skyblue;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>
